<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" style="float:right">
        <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <div>
      <el-table :data="data" @sort-change="sortFun" style="width: 100%">
        <el-table-column type="index" label="序号" width="55"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="300"></el-table-column>
        <el-table-column label="订单详情">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="look(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="total" sortable label="总价"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="xg(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="sc(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.currentPage"
        :page-size="5"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
      <el-drawer :visible.sync="dialog" direction="ltr" custom-class="demo-drawer" ref="drawer" size="50%">
        <el-table :data="form.orderDetail" border style="width: 70%;margin: 0 auto 20px;">
          <el-table-column property="title" label="名称" width="150"></el-table-column>
          <el-table-column property="vertion" label="版本" width="200"></el-table-column>
          <el-table-column property="price" label="价格"></el-table-column>
        </el-table>
        <div class="demo-drawer__content">
          <el-form :model="form">
            <el-form-item label="下单时间" :label-width="formLabelWidth">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.orderTime"
                style="width: 70%;"
                disabled
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="总价" :label-width="formLabelWidth" style="width: 70%;">
              <el-input disabled v-model="form.total" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-radio-group :disabled="see" v-model="form.status">
                <el-radio label="已结账"></el-radio>
                <el-radio label="未结账"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button :disabled="see" @click="qd">确 定</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      input: "",
      currentPage1: 5,
      dialog: false,
      form: {},
      loading: false,
      formLabelWidth: "80px",
      see: false
    };
  },
  methods: {
    ...mapActions("order", ["getDate", "saveList", "deleteList"]),
    ...mapMutations("order", ["SET_KEYWORD", "SET_ORDER", "SET_CURRENTPAGE"]),
    //修改
    xg(row) {
      this.form = { ...row };
      this.dialog = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.SET_CURRENTPAGE(val);
      this.getDate();
    },
    //取消
    cancelForm() {
      this.dialog = false;
      this.form = {};
      this.see = true;
    },
    //确定
    qd() {
      let obj = { ...this.form };
      if (obj.status == "已结账") {
        obj.status = 1;
      } else {
        obj.status = 0;
      }
      this.saveList(obj);
      this.cancelForm();
    },
    //查看
    look(row) {
      this.dialog = true;
      this.form = row;
      this.see = true;
    },
    //删除
    sc(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteList(id);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //搜索
    search() {
      this.SET_KEYWORD(this.input);
      this.SET_CURRENTPAGE(1);
      this.getDate();
    },
    //排序
    sortFun(obj) {
      console.log(obj)
      this.SET_ORDER(obj);
      this.getDate();
    }
  },
  computed: {
    ...mapState("order", ["data", "total", "pages"])
  },
  mounted() {
    this.getDate();
  }
};
</script>

<style scoped>
</style>